<template>
  <div class="noti">
    <div>
      默认
      <hf-notification />
    </div>
    <div>
      测试 value
      <hf-notification :value="11" />
    </div>
    <div>
      测试 max
      <hf-notification :value="1535" :max="1000" />
    </div>
    <div>
      自定义图标
      <hf-notification icon="aim" />
    </div>
  </div>

  <div>
    消息提醒
    <hf-notification :value="50">
      <template #default>
        <hf-list @itemClick="itemClick" @actionClick="actionClick" :list="options.list" :actions="options.action">
        </hf-list>
      </template>
    </hf-notification>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const options = ref({
  list: [
    {
      title: '关注',
      content: [
        {
          avatar: 'https://marketplace.canva.cn/FON5Q/MACOClFON5Q/2/tl/canva-MACOClFON5Q.png',
          title: 'test1',
          time: '2022-04-18 21:32:00',
          tagType: 'info',
          tag: '未开始',
        },
      ],
    },
    {
      title: '订阅',
      content: [
        {
          title: 'test1',
          time: '2022-04-18 21:32:00',
          tagType: 'info',
          tag: '未开始',
        },
      ],
    },
    {
      title: '事件',
      content: [
        {
          title: 'test1',
          time: '2022-04-18 21:32:00',
          tagType: 'info',
          tag: '未开始',
        },
      ],
    },
  ],
  action: [
    {
      icon: 'delete',
      text: '清除清除',
    },
    {
      icon: 'edit',
      text: '编辑编辑',
    },
    {
      icon: 'hide',
      text: '全部已读',
    },
  ],
})

const itemClick = (val: any) => {
  console.log(val)
}

const actionClick = (val: any) => {
  console.log(val)
}
</script>

<style scoped lang="scss">
.noti {
  margin-bottom: 10px;
  font-size: 14px;
}
</style>
